﻿@model Guline.SupportCMS.Models.ViewModel.NewsJson
@{
    Layout = "~/Views/Shared/v1_admin_layout.cshtml";
}
<script src="~/Content/jqwidgets/jqx-all.js"></script>
<script src="~/Content/jqwidgets/globalization/globalize.js"></script>
<script src="~/Content/jqwidgets/globalization/globalize.culture.vi-VN.js"></script>
<link rel="stylesheet" href="/Content/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/Content/jqwidgets/styles/jqx.arctic.css" type="text/css" />


<a href="@Url.Action("Create")" class="btn btn-small btn-success">
    <span class="icon-new icon-white"></span>
    Thêm mới
</a>


<button class="btn btn-small Edit">
    <span class="icon-edit"></span>
    Sửa
</button>


<button class="btn btn-small toolbar-delete">
    <span class="icon-delete"></span>
    Xóa
</button>


<button class="btn btn-small">
    <span class="icon-unpublish"></span>
    Bỏ lọc dữ liệu
</button>


<button class="btn btn-small">
    <span class="icon-refresh"></span>
    Làm mới
</button>

<script type="text/javascript">
    $(document).ready(function () {
        var theme = "arctic";
        var url = "@Url.Action("jsonList")";
        var rowID = 0;

        var getAdapter = function () {
            var source = {
                datatype: "json",
                datafields: [
                    { name: 'Image' },
                 { name: 'Title' },

                 { name: 'CreateDate', type: "date" },
                 { name: 'Enable', type: "boolean" },
                 { name: 'TenLoai' },
                 { name: 'ID' }
                ],
                id: 'ID',
                url: url
            };


            var dataAdapter = new $.jqx.dataAdapter(source);
            return dataAdapter;
        }
        var imagerenderer = function (row, datafield, value) {
            return '<img style="margin:10px;10px;10px;10px;height:50px;" height="50" width="100" src="@Request.Url.GetLeftPart(UriPartial.Authority)/' + value + '"/>';
        }
        var imagerenderer_company = function (row, datafield, value) {
            return '<img style="margin:10px;10px;10px;10px;height:50px;" height="50" width="150" src="@Request.Url.GetLeftPart(UriPartial.Authority)/' + value + '"/>';
                          		}
                          		var flagimage = function (row, datafield, value) {
                          		    return '<img style="margin-left: 38px;margin-top: 23px;width: auto;" height="25" width="40" src="@Request.Url.GetLeftPart(UriPartial.Authority)/' + value + '"/>';
							  }
							  var getLocalization = getlocalizationobj();
							  $("#grid_object").jqxGrid({
							      width: '100%',
							      source: getAdapter(),
							      rowsheight: 100,
							      theme: theme,
							      autoheight: true,
							      pageable: true,
							      pagermode: 'simple',
							      sortable: true,
							      pagesize: 10,
							      showfilterrow: true,
							      enabletooltips: true,
							      autoshowfiltericon: true,
							      selectionmode: 'checkbox',
							      filterable: true,
							      localization: getLocalization,
							      showtoolbar: false,
							      altrows: true,
							      columns: [
                                                                            { text: '@Html.DisplayNameFor(m => m.Image)', datafield: 'Image', cellsrenderer: imagerenderer_company, width: 120 },
							 															{ text: '@Html.DisplayNameFor(m => m.Title)', datafield: 'Title', width: 320, },
							 															

							 															{ text: '@Html.DisplayNameFor(m => m.CreateDate)', datafield: 'CreateDate', width: 120, cellsformat: "dd/MM/yyyy", filtertype: "date" },
							 															{ text: '@Html.DisplayNameFor(m => m.Enable)', datafield: 'Enable', columntype: "checkbox", width: 80, filtertype: "checklist" },
							 														
							                           { text: 'ID', datafield: 'ID', width: 30 }

            ]
        });


        $(".Edit").click(function () {
            var selectedrowindex = $("#grid_object").jqxGrid('getselectedrowindex');
            var rowscount = $("#grid_object").jqxGrid('getdatainformation').rowscount;
            var id = $("#grid_object").jqxGrid('getrowid', selectedrowindex);
            var dataRecord = $("#grid_object").jqxGrid('getrowdata', selectedrowindex);
            if (selectedrowindex >= 0) {
                location = "@Url.Action("Edit")/" + dataRecord.ID;
            }
            else {
                alert("Chọn dữ liệu cần sửa.");
            }
        });
        $("#toolbar-clearfilter").click(function () {
            $("#grid_object").jqxGrid('clearfilters');
        });
        $("#toolbar-refresh").click(function () {
            $("#grid_object").jqxGrid({
                source: getAdapter()
            });
            $("#grid_object").jqxGrid('clearselection');
        });
        $(".toolbar-delete").click(function () {
            var selectedrowindexes = $("#grid_object").jqxGrid('getselectedrowindexes');
            var rowscount = $("#grid_object").jqxGrid('getdatainformation').rowscount;
            if (selectedrowindexes.length != 0) {
                var comfim = confirm("Bạn có thật sự muốn xóa?");
                if (comfim) {
                    $("#grid_object").jqxGrid('beginupdate');
                    var resultid = 0;

                    for (var m = 0; m < selectedrowindexes.length; m++) {
                        var selectedrowindex = selectedrowindexes[selectedrowindexes.length - m - 1];
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#grid_object").jqxGrid('getrowid', selectedrowindex);
                            var dataRecord = $("#grid_object").jqxGrid('getrowdata', selectedrowindex);
                            $("#grid_object").jqxGrid('deleterow', id);
                            $.ajax({
                                type: "POST",
                                url: "@Url.Action("ajDelete")",
                                datatype: "Json",
                                data: { id: dataRecord.ID },
                                success: function (result) {

                                }
                            });
                        }
                    }

                }
            }
            else {
                alert("Chọn dữ liệu cần xóa");
            }
            $("#grid_object").jqxGrid('endupdate');
            $("#grid_object").jqxGrid('clearselection');
            return false;
        });

    });

</script>
<div id="grid_object" style="margin-left: 4px; margin-top: 10px; margin-bottom: 10px;"></div>
<a href="@Url.Action("Create")" class="btn btn-small btn-success">
    <span class="icon-new icon-white"></span>
    Thêm mới
</a>


<button class="btn btn-small Edit">
    <span class="icon-edit"></span>
    Sửa
</button>


<button class="btn btn-small toolbar-delete">
    <span class="icon-delete"></span>
    Xóa
</button>


<button class="btn btn-small">
    <span class="icon-unpublish"></span>
    Bỏ lọc dữ liệu
</button>


<button class="btn btn-small">
    <span class="icon-refresh"></span>
    Làm mới
</button>